<template>
  <div class="app-container home">

    <el-row style="padding:20px 0">
      <el-col :span="24">
        <div>
          <span class="title">智慧消防演示项目<el-tag type="success" effect="dark" class="tag" style="font-size: 10px;">正常</el-tag></span>
          <span class="item">报警数量<b class="warning">23</b></span>
          <span class="item">设备数量<b class="device">100</b></span>
          <span class="item">在线数量<b class="online">80</b></span>
          <span class="item">离线数量<b class="offline">20</b></span>
        </div>
        <div style="text-align: right;margin:16px 0 0;">
          <el-select v-model="selectValue" placeholder="请选择" class="select">
            <el-option
              v-for="item in selectList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-caret-bottom" class="toggle"  >展开</el-button>
        </div>
      </el-col>
    </el-row>

    <el-card class="box-card boxinfo" shadow="always">
      <div slot="header" class="clearfix" style="padding:12px 8px;border-bottom: 1px solid #424356">
        <span style="font-size: 13px;color:#fff">三楼开水房<el-tag effect="dark" class="tag" style="margin-left: 12px;font-size: 10px;">在线</el-tag></span>
        <el-button icon="el-icon-close-notification"  style="float: right;background: #424356;color: #fff">消音</el-button>
        <el-button type="primary" icon="el-icon-refresh"  style="float: right;margin-right: 8px; ">复位</el-button>
      </div>
      <div class="time">
        <span>实时数据</span>
        <span style="float: right;">数据更新时间：2020-11-14 19:00:00
            <b class="box" style="background:#2F3543"></b><span>正常</span>
            <b class="box" style="background:#E53B52"></b><span>报警</span></span>
      </div>
      <div class="content">

        <div v-for="data in boxList" :key="data" style="display: inline-block">
          <div class="databox" v-bind:class="{ active: data.status==1}" >
            <p class="name">{{data.name}}</p>
            <p class="info" v-for="info in data.detail" :key="info">{{info}}</p>
          </div>
        </div>

      </div>
    </el-card>

    <el-card class="box-card tabledata" shadow="always">
      <div slot="header" class="clearfix" style="padding:12px 8px;border-bottom: 1px solid #424356">
        <el-button class="type" v-bind:class="{ active: datatype==1}" @click="handleDataType(1)">历史曲线</el-button>
        <el-button class="type" v-bind:class="{ active: datatype==2}" @click="handleDataType(2)">巡检记录</el-button>
        <el-button class="type" v-bind:class="{ active: datatype==3}" @click="handleDataType(3)">报警信息</el-button>
        <el-button class="type" v-bind:class="{ active: datatype==4}" @click="handleDataType(4)">控制日志</el-button>
      </div>

      <div class="historyinfo" v-show="datatype == 1">
        <div  class="clearfix" style="padding:0 8px 10px;border-bottom: 1px solid #424356">
          <div>
            <el-button class="type" v-bind:class="{ active: historytype==1}" @click="handleHistoryType(1)">剩余电流</el-button>
            <el-button class="type" v-bind:class="{ active: historytype==2}" @click="handleHistoryType(2)">温度</el-button>
            <el-button class="type" v-bind:class="{ active: historytype==3}" @click="handleHistoryType(3)">电流</el-button>
            <el-button class="type" v-bind:class="{ active: historytype==4}" @click="handleHistoryType(4)">电压</el-button>
            <el-button class="type" v-bind:class="{ active: historytype==5}" @click="handleHistoryType(5)">有功电能</el-button>
            <el-button class="type" v-bind:class="{ active: historytype==6}" @click="handleHistoryType(6)">有功功率</el-button>
            <el-button class="type" v-bind:class="{ active: historytype==7}" @click="handleHistoryType(7)">无功功率</el-button>
            <el-button class="type" v-bind:class="{ active: historytype==8}" @click="handleHistoryType(8)">视在功率</el-button>
            <el-button class="type" v-bind:class="{ active: historytype==9}" @click="handleHistoryType(9)">功率因素</el-button>
            <el-button class="type" v-bind:class="{ active: historytype==10}" @click="handleHistoryType(10)">线电压</el-button>
          </div>
          <div class="item">
            <b class="box" style="background:#3B55FF"></b><span>温度1</span>
            <b class="box" style="background:#1BC0BF"></b><span>温度2</span>
            <b class="box" style="background:#C59AF4"></b><span>温度3</span>
            <b class="box" style="background:#D3C231"></b><span>温度4</span>
            <b class="box" style="background:#D83E60"></b><span>温度5</span>
            <el-date-picker
              v-model="checkSearchTime"
              type="date"
              placeholder="选择日期"
              style="width:123px;float:right;">
            </el-date-picker>
          </div>
        </div>

        <history-line-chart :chart-data="historyChartData" />

      </div>

      <div class="checkinfo" v-show="datatype == 2">
        <div  class="clearfix" style="padding:0 8px 20px;border-bottom: 1px solid #424356">
          <el-button  type="primary" icon="el-icon-upload2" style="margin-left:18px;float:right;">导出</el-button>
          <el-date-picker
            v-model="checkSearchTime"
            type="date"
            placeholder="选择日期"
            style="width:123px;float:right;">
          </el-date-picker>
        </div>
        <el-table
          ref="filterTable"
          :data="checkList"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="name"
            label="计划名称"
          >
          </el-table-column>
          <el-table-column
            prop="content"
            label="计划内容"
          >
          </el-table-column>
          <el-table-column
            prop="branch"
            label="支路名称"
          >
          </el-table-column>
          <el-table-column
            prop="cycle"
            label="巡检周期"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            label="巡检日期"
          >
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            width="250">
          </el-table-column>
          <el-table-column
            prop="plantime"
            label="计划巡检时间"
            width="120">
          </el-table-column>
          <el-table-column
            prop="actualtime"
            label="实际巡检时间"
            width="120">
          </el-table-column>
          <el-table-column
            prop="actor"
            label="巡检人"
          >
          </el-table-column>
          <el-table-column
            prop="action"
            label="操作"
          >
            <template>
              <el-tag style="background:#3B55FF;border-radius:2px;color:#fff;border:0;">查看</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="checkList.length>0"
          :total="checkList.length"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="checkList"
        />
      </div>

      <div class="warninginfo" v-show="datatype == 3">
        <div  class="clearfix" style="padding:0 8px 20px;border-bottom: 1px solid #424356">
          <el-button class="step" icon="el-icon-time" style="background:#E53B52;" circle></el-button><span class="text">未派发</span>
          <el-button class="step" icon="el-icon-odometer" style="background:#E5993B;" circle></el-button><span class="text">已派发未处理</span>
          <el-button class="step" icon="el-icon-circle-check" style="background:#08A67A;" circle></el-button><span class="text">已处理</span>
          <el-button  type="primary" icon="el-icon-upload2" style="margin-left:18px;float:right;">导出</el-button>
        </div>
        <el-table
          ref="filterTable"
          :data="warningList"
          style="width: 100%">
          <el-table-column
            prop="type"
            label="报警类型"
            width="100"
            filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type == 1" style="background:#8E5FE9;border-radius:2px;color:#fff;border:0;">隐患</el-tag>
              <el-tag v-if="scope.row.type == 2" style="background:#E5993B;border-radius:2px;color:#fff;border:0;">报警</el-tag>
              <el-tag v-if="scope.row.type == 3" style="background:#E53B52;border-radius:2px;color:#fff;border:0;">事故</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="gateway"
            label="网关识别型号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="device"
            label="设备型号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="仪表地址"
          >
          </el-table-column>
          <el-table-column
            prop="location"
            label="区域位置">
          </el-table-column>
          <el-table-column
            prop="detail"
            label="详情描述"

            width="250">
          </el-table-column>
          <el-table-column
            prop="status"
            label="处理状态"

            width="250">
            <template>
              <el-button class="step" icon="el-icon-time" style="background:#E53B52;" circle></el-button><span class="solid">···</span>
              <el-button class="step" icon="el-icon-odometer" style="background:#E5993B;" circle></el-button><span class="solid">···</span>
              <el-button class="step" icon="el-icon-circle-check" style="background:#555668;color:#2C2C37" circle></el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="action"
            label="操作"
          >
            <template>
              <el-tag style="background:#3B55FF;border-radius:2px;color:#fff;border:0;">处理</el-tag>
            </template>
          </el-table-column>

        </el-table>
        <pagination
          v-show="warningList.length>0"
          :total="warningList.length"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="warningList"
        />
      </div>

      <div class="controllog" v-show="datatype == 4">
        <div  class="clearfix" style="padding:0 8px 20px;border-bottom: 1px solid #424356">
          <el-button class="type active" style="margin-left:18px;float:right;">搜索</el-button>
          <el-input v-model="searchKey" placeholder="网关识别号/仪表地址/型号/操作人" style="width:267px;float:right;"></el-input>
        </div>
        <el-table
          ref="filterTable"
          :data="logList"
          style="width: 100%">
          <el-table-column
            prop="type"
            label="控制类型"
            width="100"
            filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type == 1" style="background:#8E5FE9;border-radius:2px;color:#fff;border:0;">隐患</el-tag>
              <el-tag v-if="scope.row.type == 2" style="background:#E5993B;border-radius:2px;color:#fff;border:0;">报警</el-tag>
              <el-tag v-if="scope.row.type == 3" style="background:#E53B52;border-radius:2px;color:#fff;border:0;">事故</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="项目名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="gateway"
            label="网关识别型号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="device"
            label="设备型号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="仪表地址"
          >
          </el-table-column>
          <el-table-column
            prop="platform"
            label="平台"
          >
          </el-table-column>
          <el-table-column
            prop="actor"
            label="操作人"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="发生时间"
            width="130"
          >
          </el-table-column>

        </el-table>
        <pagination
          v-show="logList.length>0"
          :total="logList.length"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="logList"
        />
      </div>

    </el-card>

  </div>
</template>
<script>

  import HistoryLineChart from './dashboard/HistoryLineChart'

  export default {
    name: "monitor",
    components: {
      HistoryLineChart
    },
    data() {
      return {
        historyChartData: {
          electricLineData: [20, 78, 82, 120, 88, 92, 98,180,94,40,74,66,170,80,180,95,100,105,76,67,82,94,99,30],
          electricBarData: [0, 0,0,0,0,0,0, 188, 0, 0, 0,0,0,0,0,0,0,0,0,0,0,0,0],
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        searchKey:'',
        datatype:1,
        historytype:1,
        selectList: [{
          value: '1',
          label: '电器火灾'
        }, {
          value: '2',
          label: '森林火灾'
        }, {
          value: '3',
          label: '校园火灾'
        }],
        selectValue:'1',
        checkSearchTime:'',
        boxList:[
          {
            name:'电流',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:0
          },
          {
            name:'电压',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:0
          },
          {
            name:'剩余电流',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:0
          },
          {
            name:'有功功率',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:1
          },
          {
            name:'总无功功率',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:0
          },
          {
            name:'反向有功功率',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:0
          },
          {
            name:'电度',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:0
          },
          {
            name:'三相电压不平衡度',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:0
          },
          {
            name:'三相电流不平衡度',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:0
          },
          {
            name:'零序电压/电流',
            detail:['IA1： 56A','IA1： 228A','IA1： 89A'],
            status:0
          }
        ],
        logList: [
          {
            type:1,
            name: '安全用电演示项目',
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            platform: 'web',
            actor: '张三',
            time: '2020-11-14 18:00:00'
          },{
            type:2,
            name: '安全用电演示项目',
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            platform: 'web',
            actor: '张三',
            time: '2020-11-14 18:00:00'
          },{
            type:2,
            name: '安全用电演示项目',
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            platform: 'web',
            actor: '张三',
            time: '2020-11-14 18:00:00'
          },{
            type:1,
            name: '安全用电演示项目',
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            platform: 'web',
            actor: '张三',
            time: '2020-11-14 18:00:00'
          },{
            type:3,
            name: '安全用电演示项目',
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            platform: 'web',
            actor: '张三',
            time: '2020-11-14 18:00:00'
          },
        ],
        warningList: [
          {
            type:1,
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            location: '三楼表箱',
            detail: 'Ua112.9,Ub112.8,Uc112.8',
            status: '1',
            action: '处理',
          },{
            type:2,
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            location: '三楼表箱',
            detail: 'Ua112.9,Ub112.8,Uc112.8',
            status: '1',
            action: '处理',
          },{
            type:2,
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            location: '三楼表箱',
            detail: 'Ua112.9,Ub112.8,Uc112.8',
            status: '1',
            action: '处理',
          },{
            type:1,
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            location: '三楼表箱',
            detail: 'Ua112.9,Ub112.8,Uc112.8',
            status: '1',
            action: '处理',
          },{
            type:3,
            gateway: '8888888888',
            device: '6666666666',
            address: '1',
            location: '三楼表箱',
            detail: 'Ua112.9,Ub112.8,Uc112.8',
            status: '1',
            action: '处理',
          },
        ],
        checkList: [
          {
            name:'巡逻计划1',
            content: '水压检测',
            branch: '三楼开水房',
            cycle: '周',
            date: '2020-10-13',
            remark: '新大楼一层 西南强电间 556',
            plantime: '2020-10-13',
            actualtime: '2020-10-15',
            actor: '张三',
            action: '1',
          },{
            name:'巡逻计划1',
            content: '水压检测',
            branch: '三楼开水房',
            cycle: '周',
            date: '2020-10-13',
            remark: '新大楼一层 西南强电间 556',
            plantime: '2020-10-13',
            actualtime: '2020-10-15',
            actor: '张三',
            action: '1',
          },{
            name:'巡逻计划1',
            content: '水压检测',
            branch: '三楼开水房',
            cycle: '周',
            date: '2020-10-13',
            remark: '新大楼一层 西南强电间 556',
            plantime: '2020-10-13',
            actualtime: '2020-10-15',
            actor: '张三',
            action: '1',
          },{
            name:'巡逻计划1',
            content: '水压检测',
            branch: '三楼开水房',
            cycle: '周',
            date: '2020-10-13',
            remark: '新大楼一层 西南强电间 556',
            plantime: '2020-10-13',
            actualtime: '2020-10-15',
            actor: '张三',
            action: '1',
          },{
            name:'巡逻计划1',
            content: '水压检测',
            branch: '三楼开水房',
            cycle: '周',
            date: '2020-10-13',
            remark: '新大楼一层 西南强电间 556',
            plantime: '2020-10-13',
            actualtime: '2020-10-15',
            actor: '张三',
            action: '1',
          },
        ]
      };
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      handleDataType(type){
        this.datatype = type;
      },
      handleHistoryType(type){
        this.historytype = type;
      },
      initHistoryData(){

      }
    },
    created(){
      this.initHistoryData();
    }
  };
</script>

<style scoped>
  .home >>> .el-input__inner{
    background: #22222D!important;
    height: 32px;
    line-height: 32px;
    color: #C9CCD3;
    font-size: 11px;
  //box-shadow: 0 0 1px 0 #A2A2A2;
    box-sizing:border-box;
    border: 1px solid #424356;
  }
  .home >>> .el-select .el-input.is-focus .el-input__inner {
    border-color: #A2A2A2!important;
  }
  .home >>> .el-select .el-input__inner:focus {
    border-color: #A2A2A2!important;
  }

  .home >>> .el-card__header{
    border-bottom: 0;
  }
  .home >>> .el-table{
    background:  #2C2C37;
  }
  .home >>> .el-table tr{
    background-color:  #2C2C37;
  }
  .home >>> .el-table th.is-leaf{
    border-bottom: 1px solid #424356;
    padding: 25px 0 5px;
  }
  .home >>> .el-table td {
    border-bottom: 1px solid #424356;
    line-height: 40px;
    height: 40px;
  }
  .home >>> .el-table tr:hover td {
    background-color:#22222D ;
  }
  .home >>> .el-table .cell{
    color: #fff;
    font-size: 11px;
  }
  .home >>> .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
    background-color: #2C2C37;
    color: #fff;
  }

  .home >>> .el-table__body tr.current-row > td {
    background-color: #22222D;
  }
  .home >>> .el-table--group::after, .el-table--border::after, .el-table::before {
    background-color: #424356;
  }
  .home >>> .el-pagination__total {
    color: #fff;
  }
  .home >>> .el-pagination.is-background .btn-prev:disabled{
    background: #2C2C37;
    color: #fff;
    box-sizing:border-box;
    border: 1px solid #424356;
  }
  .home >>> .el-pagination.is-background .btn-next:disabled{
    background: #2C2C37;
    color: #fff;
    box-sizing:border-box;
    border: 1px solid #424356;
  }
</style>


<style scoped lang="scss">
  .pagination-container{
    background: #2C2C37;
  }
  .home {
    background: #22222D;
    padding-bottom: 50px;
    padding-top: 0;
    .historyinfo{
      margin-top: -18px;
      .type{
        margin-top: 10px;
      }
      .item{
        line-height: 50px;
        font-size: 11px;
        color: #999;
        .box{
          width:13px;
          height:13px;
          border-radius: 2px;
          display: inline-block;
          margin-right: 7px;
          vertical-align: middle;
          margin-left: 0;
        }
        span{
          margin-right: 14px;
          vertical-align: middle;
        }
      }

    }
    .warninginfo{
      .step{
        border:0;color:#fff;
        font-size: 14px;
        padding: 2px;
        vertical-align: middle;
      }
      .text{
        color: #fff;
        font-size: 11px;
        margin-right: 18px;
        margin-left:6px;
      }
      .solid{
        color: #555668;
        font-size: 18px;
        vertical-align: middle;
      }
    }

    .tabledata{
      margin-top: 24px;
      .type{
        background: #2C2C37;
        color: #999;
        border: 0;
        box-shadow: 0 0 1px 0 #A2A2A2;
        border-radius: 2px;
        line-height: 16px;
      }
      .type.active{
        background: #3B55FF;
        color: #fff;
      }
    }
    .toggle{
      padding: 11px 16px;
      font-size: 13px;
      border-radius: 6px;
      margin-right: 20px;
    }
    .title{
      font-size: 17px;
      margin-right:31px;
      margin-left: 20px;
      color: #fff;
      .tag{
        margin-left: 10px;
        vertical-align: middle;
      }
    }
    .item{
      font-size: 11px;
      margin-right: 22px;
      color: #999;
      b{
        font-size: 38px;
        font-weight: bold;
        margin-left: 15px;
      }
      .warning{
        color: #E5993B;
      }
      .device{
        color: #08A67A;
      }
      .online{
        color: #3B55FF;
      }
      .offline{
        color: #999999;
      }
    }

    .select{
      margin-left: 22px;
      margin-right: 32px;
    }

    .box-card{
      background: #2C2C37;
      border: 0;
    }
    .boxinfo{
      .time{
        font-size: 11px;
        color: #999;
        height: 17px;
        .box{
          width:19px;
          height:17px;
          border-radius: 2px;
          display: inline-block;
          margin-left: 20px;
          margin-right: 5px;
          vertical-align: middle;
        }
      }
      .content{
        font-size: 11px;
        color: #999;
      }
    }


    .databox{
      width: 178px;
      height: 183px;
      background: #2F3543;
      border-radius: 5px;
      margin-top: 40px;
      padding: 29px 21px;
      font-size: 11px;
      color: #fff;
      margin-right: 28px;
      .name{
        width: 124px;
        line-height: 32px;
        font-size: 11px;
        background: #2F3543;
        border-radius: 6px;
        color: #fff;
        position: absolute;
        margin: -45px 2px 0;
        text-align: center;
        box-shadow: 0 0 1px 0 #0C0C0C;
      }
    }
    .databox.active{
      box-sizing:border-box;
      border: 1px solid #E53B52;
      .name{
        box-sizing:border-box;
        border: 1px solid #E53B52;
      }
    }
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
  /*#C9CCD3*/
</style>

